<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script th:src="@{/webjars/jquery/3.6.0/jquery.js}"></script>
    <script>
        $(function () {
            $("#name").blur(function () {
                let name = $("#name").val();
                $.getJSON({
                    url: "doCheckUserNameIsExists",
                    // data: 'name=' + name,
                    data: {"name": name},
                    success: function (userCount) {
                        if (userCount > 0) {
                            $("#checkName").text("用户名已存在");
                            $(":submit").attr("disabled", true);
                        } else {
                            $("#checkName").text("");
                            $(":submit").attr("disabled", false);
                        }
                    }
                });
            })
        })
    </script>
</head>
<body>
<h1>用户注册</h1>
<div><a th:href="@{index}">首页</a></div>
<form th:action="@{/doRegister}" method="post">
    <div>用户名: <input type="text" id="name" name="name" placeholder="用户名" autofocus value=""><span id="checkName" style="color: red"></span></div>
    <div>密 码 : <input type="password" name="password" placeholder="密码"></div>
    <div><input type="submit" value="注册"> <a th:href="@{login}">登录</a></div>
</form>
</body>
</html>